<template>
	<view class="right">我的账户余额：{{data.numbers}}元</view>
	<view class="flexbox">
		<view :class="index==data.selectIndex?'active':'noss'" v-for="(item,index) in data.moneyData" :key="item.id"
			@tap="choose" :data-msgs="item">
			<text :class="index==data.selectIndex?'active2':'noss'">￥{{item.money}}\n￥{{item.song}}</text>
		</view>
	</view>

	<view class="btnbox">
		<button class="btn" @tap="upMoney">充值</button>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from "vue"
	import {
		useStore
	} from "vuex"

	const data = reactive({
		selectIndex: 0,
		numbers: 24,
		moneyData: [{
				id: 1,
				money: 100,
				song: 10,
				isactive: false,
			},
			{
				id: 2,
				money: 100,
				song: 10,
				isactive: false,
			}, {
				id: 3,
				money: 100,
				song: 10,
				isactive: false,
			}, {
				id: 4,
				money: 100,
				song: 10,
				isactive: false,
			},
			{
				id: 5,
				money: 100,
				song: 10,
				isactive: false,
			}, {
				id: 6,
				money: 100,
				song: 10,
				isactive: false,

			},
		]
	})

	function choose(e) {
		// let item = e.currentTarget.dataset.id
		let item = e.currentTarget.dataset.msgs
		// console.log(e, 'item', item)
		data.selectIndex = item.id - 1
			console.log(e,item,data.selectIndex)
	}

	function upMoney() {
		// let 
		console.log(data.moneyData[data.selectIndex]);
	}



	// function btn() {}
</script>

<style lang="less">
	.right {
		width: 720rpx;
		text-align: right;
		margin-top: 20rpx;
	}

	.flexbox {
		display: flex;
		flex-wrap: wrap;
		height: 300rpx;


		view {
			width: 200rpx;
			height: 100rpx;
			border: 1px solid rgba(215, 215, 215, 1);
			border-radius: 10rpx;
			margin-top: 35rpx;
			color: rgba(135, 127, 127, 0.8);
			margin-left: 35rpx;
			text-align: center;
		}
	}

	.btnbox {
		margin: 0 auto;
		border-top: 1px solid gray;
		width: 682rpx;
		margin-top: 30rpx;
	}

	.active2 {
		color: blue;
	}

	.flexbox .active {
		border-color: blue;
	}

	.btn {
		border-radius: 50rpx;
		width: 680rpx;
		margin-top: 30rpx;
		height: 80rpx;
		background: rgb(164, 164, 252);
		font-size: 26rpx;
		color: white;
		line-height: 80rpx;
	}
</style>
